<template>
  <div class="card-container">
    <div class="info-title">
      支付方式
    </div>
    <div class="info-card">
      <div class="info-card-left">
        <img
          src="https://gw.alicdn.com/tfs/TB1MHAcH3HqK1RjSZJnXXbNLpXa-42-37.svg"
          alt="支"
        >
        <span>支付宝</span>
      </div>
      <div class="info-card-right">
        仅支持支付宝付款
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PayType',
  props: ['price'],
  data() {
    return {};
  },
  computed: {},
  created: function () {
    // this.id = this.$route.params.id;
  },
  methods: {}
};
</script>

<style scoped lang="scss">
  .card-container {
    width: 100%;
    padding: 0;
    overflow: hidden;
    margin-bottom: 24px;
    text-align: left;

    .info-title {
      margin-bottom: 11px;
      font-size: 28px;
      color: #cfcfd0;
    }

    .info-card {
      width: 100%;
      padding: 21px 19px;
      box-sizing: border-box;
      background: rgba(0, 0, 0, .4);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      font-size: 28px;

      .info-card-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        img {
          margin-right: 23px;
          width: 41px;
          height: 36px;
        }
        span {
          color: #ffffff;
        }
      }

      .info-card-right {
        font-size: 24px;
      }
    }
  }
</style>
